<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>摩点pk_test</title>
    <link rel="stylesheet" href="./assets/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/static/css/bar_style.css">
    <link rel="stylesheet" href="./assets/dist/css/barrager.css">
    <link rel="stylesheet" href="./assets/necss.css">
    <link rel="stylesheet" href="./assets/style.css">
</head>

<body>
    <div>
        <div class="countdown tac"></div>
    </div>
    <div class="fbox vc">
        <h2>曾艳芬</h2>
        <div class="fcol goal"><span class="z_amount"></span></div>
        <h2>陆婷</h2>
    </div>
    {% set zmoney=rank[0].totalamount|int%}
    {%set lmoney= rank[1].totalamount|int%}
    <div class="fbox inf"><span>{{zmoney}}</span><span>{{(100*zmoney/(zmoney+lmoney))|round|int}}%/{{(lmoney*100/(zmoney+lmoney))|round|int}}%</span><span class="fr">{{lmoney}}</span></div>
    <div class="fbox">
        <div class="fcol tac top-list">
            <div class="rank-item">
                <img class="fav1" src="{{rank[0].data[0].icon}}" alt="">
                <p class="nickname">{{rank[0].data[0].nickname}}</p>
                <p>¥：<span class="amount">{{rank[0].data[0].total_back_amount}}</span></p>
            </div>
            <div>
                {% for item in (rank[0].data.slice(1,5)) %}
                <div class="vc fbox rank-item">
                    <img class="fav top" src="{{item.icon}}" alt="">
                    <div class="fcol item-r">
                        <p class="nickname">{{item.nickname}}</p>
                        <p>¥：<span class="amount">{{item.total_back_amount}}</span></p>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="fcol fbox ve">
            <div class="new">
                <!--<p class="fc1"><span>ZYF-XXX</span><span>支持money</span></p>
                <p class="fc2"><span>LT-XXX</span><span>支持money</span></p>
                <p class="fc1"><span>ZYF-XXX</span><span>支持money</span></p>
                <p class="fc2"><span>Lt-XXX</span><span>支持money</span></p>-->
            </div>
        </div>
        <div class="fcol tac top-list">
            <div class="rank-item">
                <img class="fav1" src="{{rank[1].data[0].icon}}" alt="">
                <p class="nickname">{{rank[1].data[0].nickname}}</p>
                <p>¥：<span class="amount">{{rank[1].data[0].total_back_amount|float(3)}}</span></p>
            </div>
            <div>
                {% for item in rank[1].data.slice(1,5) %}
                <div class="vc fbox rank-item">
                    <img class="fav top" src="{{item.icon}}" alt="">
                    <div class="fcol item-r">
                        <p class="nickname">{{item.nickname}}</p>
                        <p>¥：<span class="amount">{{item.total_back_amount}}</span></p>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

</body>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./assets/static/js/bootstrap.min.js"></script>
<script src="./assets/dist/js/jquery.barrager.js"></script>
<script>
    var t=Date.parse(new Date(2017,5,30))-'{{time}}'
    t=t/1000
</script>
<script src="./assets/cutedown.js"></script>
<script type="text/javascript" color="157,103,62" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
<script>
    $('.z_amount').css('width', {{(100*zmoney/(zmoney+lmoney))|round|int}} + "%");



            setInterval(getMessage, 3000)
            var oldData;

            function getMessage() {
                $.get('/api/rankApi', function(json) {
                    var data = json.data;
                    // alert(Array.isArray(data))
                    $('.top-list .rank-item').each(function(index, el) {
                        // console.log(index + ',' + el)
                      //  $('img', el).get(0).src = data[index].icon
                       // $('.nickname', el).text(data[index].nickname)
                        //$('.amount', el).text(data[index].total_back_amount)
                    })
                })
            }
        
         getMessage();

    function getComment() {
        $.get('/api/commentApi', function(json) {
            // var newTime=json[0].ctime;
            // var oldTime=window.localStorage.getItem('oldtime');
            // if(!oldTime){
            //     oldTime=newTime;
            // }
            // if(oldTime!=newTime){
            //     window.localStorage.setItem('oldtime',newTime);
            //     var item={
            //         img:json[0].fav,
            //         info:json[0].nickname,
            //         href:'',
            //         close:false,
            //         color:'#fff',
            //         old_ie_color: '#000000'
            //     }
            // }
            var data = [];
            

            json.forEach(function(el, index) {
                var obj = {};
                obj.img = el.fav;
                obj.info = (el.nickname + el.content).substr(0,20);
                obj.href = "";
            obj.close = false;
            obj.color = "#FF6600";
            obj.old_ie_color = "#000000";
                data.push(obj);
            });
            //每条弹幕发送间隔
            var looper_time = 3 * 1000;
            var items = data;
            //弹幕总数
            var total = data.length;
            //是否首次执行
            var run_once = true;
            //弹幕索引
            var index = 0;
            //先执行一次
            barrager();

            function barrager() {
                if (run_once) {
                    //如果是首次执行,则设置一个定时器,并且把首次执行置为false
                    looper = setInterval(barrager, looper_time);
                    run_once = false;
                }
                //发布一个弹幕
                $('body').barrager(items[index]);
                //索引自增
                index++;
                //所有弹幕发布完毕，清除计时器。
                if (index == total) {
                    clearInterval(looper);
                    return false;
                }
            }
        })
    }
getComment();
</script>

</html>